<template>
  <div class="box">
    <header>
<!--      <span class="backIcon">-->
<!--        <el-page-header @back="goBack"></el-page-header>-->
<!--      </span>-->
      <div><strong>首页</strong></div>
    </header>
    <main>
      <el-carousel
          :interval="5000"
          arrow="always"
          height="160px">
        <el-carousel-item v-for="item in imgList" :key="item.name">
          <img :src="item.src" alt="图片走失了" :title="item.title" />
        </el-carousel-item>
      </el-carousel>

      <div class="index-menu">
        <el-row
            :gutter="12"
            justify="space-around">
          <el-col :span="6" align="center">
            <div>
              <router-link to="informationFilling">
                <div class="index-icon index-icon0"><img :src="iconList[0].src"></div>
                <div class="index-icon-text">自主报到</div>
              </router-link>
            </div>
          </el-col>
          <el-col :span="6" align="center">
            <div>
              <a href="#">
                <div class="index-icon index-icon1"><img :src="iconList[1].src"></div>
                <div class="index-icon-text">绿色通道</div>
              </a>
            </div>
          </el-col>
          <el-col :span="6" align="center">
            <div>
              <a href="#">
                <div class="index-icon index-icon2"><img :src="iconList[2].src"></div>
                <div class="index-icon-text">抵校登记</div>
              </a>
            </div>
          </el-col>
          <el-col :span="6" align="center">
            <div>
              <a href="#">
                <div class="index-icon index-icon3"><img :src="iconList[3].src"></div>
                <div class="index-icon-text">推迟报到</div>
              </a>
            </div>
          </el-col>
        </el-row>
        <el-row
            :gutter="12"
            justify="space-around">
          <el-col :span="6" align="center">
            <div>
              <a href="#">
                <div class="index-icon index-icon4"><img :src="iconList[4].src"></div>
                <div class="index-icon-text">入学须知</div>
              </a>
            </div>
          </el-col>
          <el-col :span="6" align="center">
            <div>
              <a href="#">
                <div class="index-icon index-icon5"><img :src="iconList[5].src"></div>
                <div class="index-icon-text">通知公告</div>
              </a>
            </div>
          </el-col>
          <el-col :span="6" align="center">
            <div>
              <a href="#">
                <div class="index-icon index-icon6"><img :src="iconList[6].src"></div>
                <div class="index-icon-text">资料下载</div>
              </a>
            </div>
          </el-col>
          <el-col :span="6" align="center">
            <div>
              <a href="#">
                <div class="index-icon index-icon7"><img :src="iconList[7].src"></div>
                <div class="index-icon-text">咨询帮助</div>
              </a>
            </div>
          </el-col>
        </el-row>
      </div>

      <div>
        <CampusProfile />

        <CampusInformation />
      </div>

    </main>
    <footer class="bottom-menu">
      <NavBottomBar/>
    </footer>
  </div>
</template>

<script>
import NavBottomBar from "@/components/NavBottomBar";
import CampusProfile from "@/components/CampusProfile";
import CampusInformation from "@/components/CampusInformation";

export default {
  name: 'homepage',
  components: {CampusInformation, CampusProfile, NavBottomBar},
  comments: {
    NavBottomBar,
    CampusProfile,
    CampusInformation
  },
  data() {
    return {
      imgList: [
        {
          name: "c1",
          src: require("@/assets/images/carousel/1.jpeg"),
          title: "这是1.jpeg"
        },
        {
          name: "c2",
          src: require("@/assets/images/carousel/2.jpeg"),
          title: "这是2.jpeg"
        },
        {
          name: "c3",
          src: require("@/assets/images/carousel/3.jpeg"),
          title: "这是3.jpeg"
        },
      ],
      iconList: [
        {
          name: "i1",
          src: require("@/assets/images/index-icon/frm1.png"),
          title: "报到登记"
        },
        {
          name: "i2",
          src: require("@/assets/images/index-icon/green channel.png"),
          title: "绿色通道"
        },
        {
          name: "i3",
          src: require("@/assets/images/index-icon/registering1.png"),
          title: "抵校登记"
        },
        {
          name: "i3",
          src: require("@/assets/images/index-icon/funnel.png"),
          title: "推迟报到"
        },
        {
          name: "i4",
          src: require("@/assets/images/index-icon/reserve3.png"),
          title: "入学须知"
        },
        {
          name: "i5",
          src: require("@/assets/images/index-icon/notice1.png"),
          title: "公告"
        },
        {
          name: "i6",
          src: require("@/assets/images/index-icon/download1.png"),
          title: "资料下载"
        },
        {
          name: "i7",
          src: require("@/assets/images/index-icon/service3.png"),
          title: "咨询帮助"
        },
      ]
    };
  },
  methods: {
    goBack() {

    }
  },
};
</script>

<style lang="less" scoped>
.box {
  width: 100%;
  height: 100%;
}

// header style
header {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 2.6rem;
  background: #45C0F8;
  color: #fff;
}
header .backIcon {
  position: absolute;
  width: 6rem;
  left: 0;
}
strong {
  //font-size: 1.1rem;
}

// main style
main {
  padding-bottom: 6rem;
}
.index-menu {
  width: 100%;
  margin-top: 1px;
  background: #fff;
  padding-top: 1rem;
  padding-bottom: 0.2rem;
}
.index-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.1rem;
  height: 3.1rem;
  //border: 3px solid #7bddd3;
  border-radius: 992px;
}
.index-icon img {
  width: 2.3rem;
  height: 2.3rem;
}
.index-icon-text {
  font-size: 14px;
  color: black;
}
.index-icon0 {
  border: 2px solid #ffcc66;
}
.index-icon1 {
  border: 2px solid #7bddd3;
}
.index-icon2 {
  border: 2px solid #E0C02A;
}
.index-icon3 {
  border: 2px solid #FEE0C5;
}
.index-icon4 {
  border: 2px solid #F17356;
}
.index-icon5 {
  border: 2px solid #09DCDF;
}
.index-icon6 {
  border: 2px solid #6B21FF;
}
.index-icon7 {
  border: 2px solid #BC151A;
}
// footer style
.bottom-menu {
  position: fixed;  // 让菜单始终位于底部
  color: #fff;
  bottom: 0;
  width: 100%;
  background: #fff;
  padding: 6px;
  text-align: center;
}
</style>
